<template>
  <div class="flex">
    <div class="left">本网站仅供学习交流使用，不用作任何其他用途！</div>
    <div class="right">
      <ChangeDark class="dark" />
      <el-button class="btn" type="primary" @click="login" :icon="User"
        >登录</el-button
      >
    </div>
  </div>
  <div class="flex">
    <div class="mid">
      <div class="title">
        <div class="title-logo">
          <img class="no-select" src="@/assets/title.png" />
        </div>
        <div class="title-text no-select">话瞄</div>
      </div>
      <div class="desc no-select">最懂你的AI搜索引擎~</div>
    </div>
  </div>
</template>

<script setup>
import { User } from "@element-plus/icons-vue";
import ChangeDark from "./ChangeDark.vue";
import { ElNotification } from "element-plus";

const login = () => {
  ElNotification({
    title: "提示",
    message: "现无需登录，内测期间免费使用~",
    type: "info",
  });
};
</script>

<style scoped>
.no-select {
  user-select: none;
}
.flex {
  display: flex;
  justify-content: center;
}

.left {
  flex: 1;
  color: #878383;
}
.right .dark {
  display: inline-block;
}
.right .btn {
  margin-left: 20px;
}

.mid {
  flex: 5;
}
.desc {
  text-align: center;
  font: 600 1.5em/1.7em "Microsoft YaHei";
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-text {
  font: 800 2em/2.3em "Microsoft YaHei";
  letter-spacing: 3px;
  margin-left: 10px;
}

.title-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px 5px rgba(170, 166, 166, 0.5);
}

.title-logo img {
  width: 100%;
  height: 100%;
}
</style>
